<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-select
          v-model="query.status"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 120px"
         
        >
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          />
        </el-select>
        <span>预计时间: </span>
          <el-date-picker
            v-model="timeMode"
            type="daterange"
            range-separator="至"
            size="small"
            class="filter-item charges-date-picker"
            start-placeholder="开始事件"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
            style="width: 240px"
            @change="onchangeDate"
          >
          </el-date-picker>
        <el-input
          v-model="query.contentName"
          placeholder="请输入事件名称"
          size="small"
          class="filter-item"
          style="width: 140px"
        />
        <rrOperation :crud="crud" @resetQuery="onResetQuery"/>
      </div>
      <crudOperation :permissions="permission"></crudOperation>
    </div>
    <!-- 表格渲染 -->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column v-if="columns.visible('contentName')" label="事件名称" prop="contentName"></el-table-column>
      <el-table-column v-if="columns.visible('content')" label="事件内容" prop="content"></el-table-column>
      <el-table-column v-if="columns.visible('planTime')" label="预计完成时间" prop="planTime"></el-table-column>
      <el-table-column v-if="columns.visible('responsibleUserName')" label="负责人" prop="responsibleUserName" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column v-if="columns.visible('status')" label="状态" prop="status" :show-overflow-tooltip="true">
          <template v-slot="slot">
              {{contentStatus(slot.row.status)}}
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('remark')" label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <template v-if="scope.row.status == 1||scope.row.status == null">
            <div class="body-content addPrescription">
                <el-button type="text" @click="onEdit(scope.row,1)">编辑</el-button>
                <el-button type="text" @click="onEdit(scope.row,2)">关闭</el-button>
                <el-button type="text" @click="onEdit(scope.row,3)">查看</el-button>
            </div>
        </template>
        <template v-else>
            <div class="body-content addPrescription" style="text-align:right">
           <el-button type="text" @click="onEdit(scope.row,3)">查看</el-button>  
            </div>
        </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination />
    <!-- 新增、编辑供应商 -->
    <commissionForm :pharmacyId="pharmacyId"></commissionForm>

      <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="showEdit"
    title="编辑"
    :show-close="false"
    width="900px"
  >
    <el-form
      label-width="100px"
      size="small"
      ref="form"
      :model="detailData"
      :rules="rules"
      :inline="true"
    >
    <div>
       <el-form-item label="事件名称：" prop="contentName">
        <el-input v-model="detailData.contentName" style="width:200px;"/>
      </el-form-item>

       <el-form-item label="预计完成时间：" label-width="120px"  prop="planTime">
        <el-date-picker
        
          v-model="detailData.planTime"
          type="datetime"
          size="small"
          class="filter-item charges-date-picker"
          placeholder="预计完成时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
    </div>
      
      
      
      <div>
        <el-form-item label="负责人：" prop="responsibleUserName">
        <el-input v-model="detailData.responsibleUserName" style="width:200px;"/>
      </el-form-item>
       
      </div>
      <div>
        <el-form-item label="事件内容：" prop="content">
        <el-input v-model="detailData.content" style="width:400px;" type="textarea"  :rows="4" />
      </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancelClick">取消</el-button>
      <el-button :loading="crud.procesLoading" type="primary" @click="onClickUpdate">确认</el-button>
    </div>
  </el-dialog>
  <el-dialog append-to-body
    :close-on-click-modal="false"
    :visible.sync="showClose"
    :show-close="false"
    title="关闭"
    width="600px">
    <el-form
      label-width="100px"
      size="small"
      ref="form"
      :model="detailData"
      :rules="ruless"
      :inline="true"
    >
    <el-form-item label="事件状态：" prop="status">
        <el-select
          v-model="detailData.status"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 120px"
          @change="onChangeEStatus"
        >
          <el-option
            v-for="item in statusLists"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注内容：" prop="remark">
        <el-input v-model="detailData.remark" style="width:400px;" type="textarea"  :rows="4" />
      </el-form-item>
     
    </el-form>
     <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancelClick">取消</el-button>
      <el-button :loading="crud.procesLoading" type="primary" @click="onClickUpdate">确认</el-button>
      </div>
  </el-dialog>

  <el-dialog append-to-body
    :close-on-click-modal="false"
    :visible.sync="showDetail"
    title="查看"
    width="900px">
    <el-form
      label-width="130px"
      size="small"
      ref="form"
      :model="detailData"
      :inline="true"
    >
    <div>
    <el-form-item label="事件名称：" prop="contentName">
          {{detailData.contentName}}
      </el-form-item>
       
       <el-form-item label="负责人：" prop="responsibleUserName">
          {{detailData.responsibleUserName}}
      </el-form-item>
       
    </div>
    <div>
<el-form-item label="操作人：" prop="updateUserName">
        {{detailData.updateUserName}}
    </el-form-item>
      <el-form-item label="事件状态：" prop="status">
          {{contentStatus(detailData.status)}}
      </el-form-item>
       
    </div>
    
   <div>
     <el-form-item label="创建时间" prop="createTime">
          {{detailData.createTime}}
      </el-form-item>
   </div>
   <div>
     <el-form-item label="预计完成时间：" prop="planTime">
          {{detailData.planTime}}
      </el-form-item>
   </div>
    <div v-if="detailData.completeTime">
       <el-form-item label="关闭时间：" prop="completeTime">
          {{detailData.completeTime}}
      </el-form-item>
    </div>
    
    <div>
      <el-form-item label="事件内容：" prop="content">
          {{detailData.content}}
      </el-form-item>
    </div>
    <div>
      <el-form-item label="备注内容：" prop="remark">
          {{detailData.remark}}
        </el-form-item>
      </div>
       
       
    </el-form>
     <div slot="footer" class="dialog-footer">
      <el-button :loading="crud.procesLoading" type="primary" @click="showDetail = false">确认</el-button>
      </div>
  </el-dialog>
  </div>
</template>

<script>
import CRUD, { presenter, header } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import pagination from "@crud/Pagination";
import commissionForm from "./moudle/form";
import crudCommission from "@/api/outpatientService/commission";
import { add, edit ,del} from "@/api/outpatientService/commission";
import udOperation from '@crud/UD.operation';

let defaultCrud = CRUD({
  title: "待办事项",
  url: "/api/schedule",
  sort: ['plan_time'],
  crudMethod: { ...crudCommission },
  query: {endPlanTime: null,startPlanTime: null, contentName: null, responsibleUserName: null,status:null}
});

export default {
  name: "commission",
  components: { crudOperation, rrOperation, pagination, commissionForm, udOperation },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
        rules: {
        contentName: [
          { required: true, message: '请输入待办事项名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入待办事项内容', trigger: 'blur' }
        ]
      },
      ruless: {
        status: [
          { required: true, message: '请选择事件状态', trigger: 'blur' }
        ],
      },
      permission: [
        {
          type: "add",
          position: 1,
          permission: ["admin", "commission:add"]
        }
      ],
      statusList: [
        {id: 1, text: "未完成"},
        {id: 2, text: "已完成"},
        {id: 3, text: "已取消"}
      ],
      statusLists: [
          {id: 1, text: "请选择"},
        {id: 2, text: "完成"},
        {id: 3, text: "取消"}
      ],
      pharmacyId: null,
      showDialog: false,
      showEdit:false,
      showDetail:false,
      showClose:false,
      detailData:{},
      updateUserName:null,
      updateUserId:null,
      timeMode:'',
    }
  },
  created() {
    this.$store.dispatch("GetInfo").then(res => {
      this.updateUserName = res.nickName;
      this.updateUserId = res.pharmacyId;
      this.crud.toQuery();
    });
  },
  methods: {
    onResetQuery() {
    //   this.query.pharmacyId = this.pharmacyId;
    },
    contentStatus(type){
        switch (type) {
            case 1:
                return '未完成';
                break;
             case 2:
                return '已完成';
                break;
            case 3:
                return '已取消';
                break;
            default:
                break;
        }
    },
    onchangeDate(e){
this.query.startPlanTime = e[0];
this.query.endPlanTime = e[1];
    },
    onChangeEStatus(e){
        
        this.detailData.status = e;
    },
    cancelClick(){
        this.showEdit = false;
        this.showClose = false;
        this.crud.toQuery();
    },
    onClickUpdate(){
      if(!this.detailData.content||!this.detailData.contentName){
        return;
      }
        this.detailData.updateUserId = this.updateUserId;
        this.detailData.updateUserName = this.updateUserName;
     edit(this.detailData).then(() => {
        this.showEdit = false;
        this.showClose = false;
        this.showClose = false;
        this.showDetail = false;
        this.crud.toQuery();
      })
    },
    onEdit(row,index){
        this.detailData = {};
        this.detailData = row;
        if(index == 1){
            this.showEdit = true;
        }else if(index == 2){
            this.showClose = true;
        }else if(index ==3){
            this.showDetail = true;
        }

    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  .body-content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  .addPrescription{
    text-align: right;
    color: cornflowerblue;
    font-size: 14px;
  }
 
</style>
